<template>
  <div>
    <div v-show="isError">
      <error @refresh="$emit('refresh')" />
    </div>

    <div v-show="!isError">
      <loading v-show="isShowLoading" />
      <div v-show="!isShowLoading">
        <div
          v-show="!isEmpty"
          v-scroll="scrollLoadAction"
          class="infinite-list"
          style="overflow: auto"
        >
          <slot />
          <div class="mb-40">
            <more v-show="!isNoMore && isRequesting" />
            <no-more v-show="isNoMore" />
          </div>
        </div>

        <div v-show="isEmpty">
          <no-content />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Error from './Error.vue';
import Loading from './Loading.vue';
import NoContent from './NoContent.vue';
import NoMore from './NoMore.vue';
import More from './More.vue';

export default {
  components: { NoContent, Error, NoMore, Loading, More },

  props: {
    isShowLoading: {
      type: Boolean,
      default: false
    },
    isRequesting: {
      type: Boolean,
      default: false
    },
    isError: {
      type: Boolean,
      default: false
    },
    isEmpty: {
      type: Boolean,
      default: false
    },
    isNoMore: {
      type: Boolean,
      default: false
    },
    scrollLoadAction: {
      type: Function,
      default: () => {}
    },
    moreLoadAction: {
      type: Function,
      default: () => {}
    }
  }
};
</script>
